<template>
	<div class="centered-container">
		<div class="card">
			<h2>选择角色</h2>

			<DepositCard v-if="showDepositCard" @close="showDepositCard = false" />
			<!-- 签到图标 -->
			<button class="icon-button">
				<i class="fa-solid fa-calendar" :class="{ 'fa-bounce': isBouncing }" @click="signIn"></i>
			</button>

			<!-- 积分图标 -->
			<div class="points-container" @click="depositCard">
				<i class="fa-solid fa-database"></i>
				<span class="points-text">{{points}}积分</span>
			</div>

			<div class="subcard">
				<div class="box-card">
					<p class="public"> 公有模式角色列表</p>
					<div v-if="publicCharacters.length === 0" class="no-data">
						暂无角色数据，点击创建角色，创建属于自己的角色吧
					</div>
					<div class="item" v-for="(character, index) in publicCharacters" :key="character.cid"
						@click="handleClick(character)" @mouseover="highlightCharacter(character.cid)"
						@mouseleave="removeHighlight(character.cid)" v-if="character.train_status !== 'non-uploaded'"
						:class="{ 'highlighted': highlightedIndex === character.cid }">
						{{ character.name }} -
						<span v-if="character.train_status === 'ready'">就绪</span>
						<span v-else-if="character.train_status === 'exchanged'">排队中</span>
						<span v-else-if="character.train_status === 'training'">训练中</span>
					</div>
				</div>
				<div class="box-card">
					<p class="private"> 私有模式角色列表</p>
					<div v-if="privateCharacters.length === 0" class="no-data">
						暂无角色数据，点击创建角色，创建属于自己的角色吧
					</div>
					<div class=" item" v-for="(character, index) in privateCharacters" :key="character.cid"
						@click="handleClick(character)" @mouseover="highlightCharacter(character.cid)"
						@mouseleave="removeHighlight(character.cid)" v-if="character.train_status !== 'non-uploaded'"
						:class="{ 'highlighted': highlightedIndex === character.cid }">
						<div class="character-info">
							{{ character.name }} -
							<span v-if="character.train_status === 'ready'">就绪</span>
							<span v-else-if="character.train_status === 'exchanged'">排队中</span>
							<span v-else-if="character.train_status === 'training'">训练中</span>
						</div>
					</div>

					<!-- 飘字提示信息 -->
					<MessageBox ref="messageBox" />
				</div>
			</div>
			<!-- 导航栏 -->
			<NavBar />
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import NavBar from '@/components/NavBar.vue';
	import MessageBox from '@/components/MessageBox.vue';
	import DepositCard from '@/components/DepositCard.vue';
	import {
		getCharacter,
		getPointsFromSigned,
		getUserPoints,
		checkSignIn
	} from '@/api/url_query'

	export default {
		components: {
			NavBar,
			MessageBox,
			DepositCard
		},
		data() {
			return {
				publicCharacters: [],
				privateCharacters: [],
				highlightedIndex: null,
				uid: '',
				message: '',
				bPublic: false, //默认私有
				isBouncing: false,
				points: 0,
				showDepositCard: false,
			}
		},
		mounted() {
			this.fetchCharacters();
			this.fetchPoints();
			this.checkTodaySign();
		},

		methods: {
			fetchCharacters() {
				this.uid = localStorage.getItem('uid');
				Promise.all([getCharacter(this.uid, true), getCharacter(this.uid, false)])
					.then(([publicResponse, privateResponse]) => {
						this.publicCharacters = publicResponse.data.cidArr;
						this.privateCharacters = privateResponse.data.cidArr;
						console.log('publicCharacters:', this.publicCharacters);
						console.log('privateCharacters:', this.privateCharacters);
					})
					.catch(error => {
						console.error('error' + error);
					});
			},

			depositCard() {
				this.showDepositCard = true;
			},


			handleClick(character) {
				//bPublic传参
				this.bPublic = this.publicCharacters.includes(character);

				if (character.train_status === 'ready') {
					console.log('bPublic', this.bPublic);
					console.log('cid', character.cid)
					this.$router.push({
						path: '/ConversationPage',
						query: {
							uid: this.uid,
							characterName: character.name,
							cid: character.cid,
							bPublic: this.bPublic
						}
					});
				} else {
					this.$refs.messageBox.showMessage('角色正在训练中', 2000, () => {
						console.log('角色正在训练中路由跳转被阻止');
					});
				}
			},

			async checkTodaySign() {
				const response = await checkSignIn(this.uid);
				console.log("签到状态信息:", response);
				if (response.data.retMsg) {
					this.isBouncing = true; //收到true为可以签到，图标跳动
				} else {
					this.isBouncing = false;
				}
			},

			async signIn() {
				this.isBouncing = false; // 点击后停止图标跳动
				console.log("传递给后端的 uid:", this.uid);
				try {
					const response = await getPointsFromSigned(this.uid);
					console.log("res", response);
					if (response.data.points !== undefined) {
						this.points = response.data.points; // 直接更新当前积分
						this.$refs.messageBox.showMessage('签到成功', 2000);
						console.log('签到成功', this.points);
					} else if (response.data.error === 'You have already signed in today') {
						this.$refs.messageBox.showMessage('已经签过了哦，不要一口吃成大胖子！', 2000);
					}
				} catch (error) {
					console.error('签到失败', error);
				}
			},

			async fetchPoints() {
				try {
					const response = await getUserPoints(this.uid);
					this.points = response.data.points;
					console.log('points', this.points)
				} catch (error) {
					console.error('Error fetching points:', error);
				}
			},



			highlightCharacter(cid) {
				this.highlightedIndex = cid;
			},
			removeHighlight() {
				this.highlightedIndex = null;
			},

		}
	}
</script>

<style scoped>
	.card {
		position: relative;
		width: 400px;
		border-radius: 8px;
		padding: 15px, 15px, 15px, 0;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.card h2 {
		margin: 10px;
		text-align: center;
	}

	.subcard {
		width: 400px;
		border-radius: 8px;
		padding: 15px, 15px, 15px, 0;
		border: 1px solid #ccc;
		max-height: 300px;
		min-height: 300px;
		overflow: auto;
	}

	.item {
		padding: 15px 0;
		display: flex;
		justify-content: center;
	}

	.box-card {
		width: 100%;
		border-radius: 8px;
	}

	.highlighted {
		cursor: pointer;
		background-color: gainsboro;
	}

	p {
		padding: 15px 0;
		text-align: center;
		color: #333;
		font-size: 16px;
		font-weight: 500;
		background-color: #f5f5f5;
		border-radius: 8px;
		margin: 10px 0;
		border: 1px solid #ddd;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 添加轻微的阴影效果，使元素看起来更立体 */
		transition: background-color 0.3s, box-shadow 0.3s;
		/* 添加过渡效果，使背景色和阴影在鼠标悬停时变化更加平滑 */
	}

	.no-data {
		font-size: 14px;
		text-align: center;
		margin: 15px
	}

	.character-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
		flex: 1;
		margin-left: 40px;
	}

	.icon-button {
		position: absolute;
		right: 90px;
		top: 15px;
		background: none;
		/* 无背景 */
		border: none;
		/* 无边框 */
		cursor: pointer;
		/* 鼠标指针 */
		padding: 0;
		/* 内边距为零 */
		font-size: 24px;
		/* 字体大小 */
		color: #333;
		/* 图标颜色 */
		transition: color 0.3s;
		/* 颜色过渡效果 */
	}

	.icon-button:hover {
		color: #555;
		/* 悬停时的颜色变化 */
	}

	.points-container {
		position: absolute;
		right: 10px;
		top: 16px;
		display: inline-flex;
		align-items: center;
		font-size: 24px;
		cursor: pointer;
		color: #333;
		transition: color 0.3s ease;
	}

	/* 图标悬停效果 */
	.points-container:hover {
		color: #555;
	}

	/* 积分文字 */
	.points-text {
		margin-left: 4px;
		font-size: 10px;
		font-weight: 540;
	}
</style>